<template>
	<view style="background: #F8F8F8;height: 100vh;">
		<view class="user-content">
			<view class="pwd-box">
				<view class="tit">
					重置密码
					<text>(密码需6～18个字符)</text>
				</view>
				<uni-forms ref="dynamicForm" :model="dynamicFormData" label-width="80px">
					<uni-forms-item label="手机号" required>
						<view>{{dynamicFormData.mobile}}</view>
					</uni-forms-item>
					<uni-forms-item label="验证码" required>
						<view class="form-item">
							<input v-model="dynamicFormData.captcha" placeholder="请输入验证码" />
							<text @tap="postMsg" class="codeTips">{{tip}}</text>
						</view>
					</uni-forms-item>
					<uni-forms-item label="新密码" required>
						<input v-model="dynamicFormData.newpassword" type="safe-password" placeholder="请输入新密码" />
					</uni-forms-item>
					<uni-forms-item label="确认密码" required>
						<input v-model="dynamicFormData.passwordConfirm" type="safe-password" placeholder="请输入确认密码" />
					</uni-forms-item>
				</uni-forms>
				<view class="remark-tip">提示：新密码重新登录时生效</view>
			</view>
			<uv-code ref="code" :seconds="60" @change="codeChange" class="button"></uv-code>
			<button size="mini" @click="submit" class="btn">提交</button>
		</view>
	</view>
</template>

<script>
	import api from '@/api/index2.js';
	export default {
		data() {
			return {
				// 数据源
				dynamicFormData: {
					mobile: '',
					captcha: '',
					newpassword: '',
					passwordConfirm: ''
				},
				tip: '', //验证码倒计时提示
			};
		},
		onLoad() {},
		computed: {
			userinfo() {
				return uni.getStorageSync("userinfo")
			}
		},
		onShow() {
			this.dynamicFormData.mobile = this.userinfo.mobile;
		},
		methods: {
			codeChange(text) {
				this.tip = text
			},
			// 发送验证码
			postMsg() {
				if (this.$refs.code.canGetCode) {
					uni.showLoading({
						icon: "none",
						title: '正在获取验证码'
					})

					let params = {
						mobile: this.dynamicFormData.mobile,
						event: 'resetpwd'
					}
					api.sendCode(params).then(res => {
						uni.hideLoading();
						uni.showToast({
							title: res.msg
						})
						this.$refs.code.start();
					})

				} else {
					uni.showToast({
						title: "倒计时后再发送！",
						icon: "none",
					})
				}
			},
			submit() {
				if (!this.dynamicFormData.captcha) {
					return uni.showToast({
						icon: "none",
						title: '请输入验证码！'
					});
				}
				if (!this.dynamicFormData.newpassword) {
					return uni.showToast({
						icon: "none",
						title: '请输入新密码！'
					});
				}
				if (!this.dynamicFormData.passwordConfirm) {
					return uni.showToast({
						icon: "none",
						title: '请输入确认密码！'
					});
				}
				if (this.dynamicFormData.newpassword !== this.dynamicFormData.passwordConfirm) {
					return uni.showToast({
						icon: "none",
						title: '两次输入的密码不一致！'
					});
				}
				api.resetPassword(this.dynamicFormData).then(res => {
					uni.showToast({
						icon: "none",
						title: '修改成功'
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
					
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.user-content {
		background: url('../../static/images/home/home-bg.png') no-repeat;
		background-size: 100% 408rpx;
		padding-bottom: 100rpx;
		padding-top: 22rpx;

		.pwd-box {
			margin: 0 20rpx;
			background: url('../../static/images/home/empty-bg.png') no-repeat;
			background-size: 100% 100%;
			padding: 52rpx 40rpx;

			.tit {
				font-family: PingFangSC, PingFang SC;
				font-weight: 550;
				font-size: 34rpx;
				color: #000000;
				line-height: 48rpx;
				font-style: normal;

				uni-text {
					color: #b0b0b0;
					font-weight: 500;
				}
			}

			.form-item {
				display: flex;
				align-items: center;

				.button {
					display: inline-flex;
					width: 230rpx;
					height: 60rpx;
					color: #000000;
				}

				.codeTips {
					color: #2f9afe;
					font-size: 24rpx;
				}
			}

			.remark-tip {
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 400;
				font-size: 24rpx;
				color: #49a1fd;
				line-height: 24rpx;
				font-style: normal;
				margin-top: 20rpx;
			}
		}

		.btn {
			background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
			box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(20, 135, 255, 0.4);
			border-radius: 44rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #ffffff;
			line-height: 88rpx !important;
			text-align: right;
			font-style: normal;
			height: 88rpx;
			margin: 36rpx 28rpx;
			width: calc(100% - 56rpx);
			text-align: center;
			border: none;

			&:after {
				border: none;
			}
		}
	}
</style>